<template>
  <div>
    <el-row>
      <el-col :span="24" id="Coach1">

        <div id="Coach2">
          <el-input v-model="param.coachName" placeholder="请输入姓名" style="width: 20%;"></el-input>
          <el-button type="primary" @click="search" round>搜索</el-button>
        </div>
        <div style="height: 20px;"></div>

        <el-table :data="page.records" border>
          <el-table-column type="selection">
          </el-table-column>
          <el-table-column prop="coachId" label="教练ID" width="70">
          </el-table-column>
          <el-table-column prop="coachImage" label="教练头像" width="130">
            <template #default="scope">
              <img :src="scope.row.coachImage" alt="教练头像" style="max-width: 110px; max-height: 110px">
            </template>
          </el-table-column>
          <el-table-column prop="coachName" label="教练用户名" width="110">
          </el-table-column>
          <el-table-column prop="coachNickName" label="教练昵称" width="110">
          </el-table-column>
          <el-table-column prop="coachPhone" label="教练手机" width="130">
          </el-table-column>
          <el-table-column prop="coachTypeName" label="教练类型" width="130">
          </el-table-column>
          <el-table-column prop="coachRemark" label="备注" width="110">
          </el-table-column>
          <el-table-column prop="coachPersonal" label="团/私" width="110">
            <template slot-scope="scope">
              <template v-if="scope.row.coachPersonal == 0">
                私课教练
              </template>
              <template v-else-if="scope.row.coachPersonal == 1">
                团课教练
              </template>
            </template>
          </el-table-column>
          <el-table-column prop="coachState" label="教练状态" width="90">
            <template slot-scope="scope">
              <template v-if="scope.row.coachState == 0">
                注销
              </template>
              <template v-else-if="scope.row.coachState == 1">
                可预约
              </template>
              <template v-else-if="scope.row.coachState == 2">
                授课中
              </template>
              <template v-else-if="scope.row.coachState == 3">
                未认证
              </template>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="240">
            <template #default="scope">

              <el-button @click="breakCoach(scope.row.coachId)" v-if="scope.row.coachState == '1'" type="text"
                size="small">解约</el-button>

            </template>
          </el-table-column>
        </el-table>

        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="page.pageNum" :page-sizes="[1, 2, 3, 5]" :page-size="5"
          layout="total, sizes, prev, pager, next, jumper" :total="page.total">
        </el-pagination>


      </el-col>
    </el-row>

  </div>
</template>

<script>
  export default {
    name: "CoachManagement",
    data() {
      return {
        page: {},
        param: {
          coachName: "",
          pageNum: 1,
          pageSize: 5,
        },
      }
    },
    methods: {
      //解约的方法
      breakCoach(){ /////////////////////写到这里了

      },
      //搜索按钮
      search() {
        this.param.pageNum = 1;
        this.loadAllCoach();
      },
      //分页方法
      handleSizeChange(val) {
        this.param.pageSize = val;
        this.loadAllCoach();
      },
      handleCurrentChange(val) {
        this.param.pageNum = val;
        this.loadAllCoach();
      },
      //查询全部，包括带条件查询
      loadAllCoach() {
        this.$http.get("/account/yCoach/loadPageCoach", {
          params: this.param
        }).then(resp => {
          this.page = resp.data.data;
        })
      },

    },
    created() {
      this.loadAllCoach();
    }
  }
</script>

<style>
  #Coach2{
    margin-left: -420px;
    line-height: 100%;
    width: 100%
  }
  #Coach1 {
    line-height: 100%;
    width: 100%
  }
</style>
